<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="wrap" id="app">
			<div class="search_form">
				<div class="logo">
					<img src="images/02.JPG" alt="logo" />
				</div>
				<div class="form_group">
					<input type="text" v-model="city" @keyup.enter="searchWeather" 
					class="input_txt"  placeholder="请输入查询的天气" />
					<button class="input_sub">
						搜索
					</button>
				</div>
				<div class="hotkey">
					<a href="javascript:;" @click="changeCity('北京')">北京</a>
					<a href="javascript:;" @click="changeCity('上海')">上海</a>
					<a href="javascript:;" @click="changeCity('广州')">广州</a>
					<a href="javascript:;" @click="changeCity('深圳')">深圳</a>
				</div>
			</div>
			<ul class="weather_list">
				<li v-for="item in weatherList">
					<div class="ingo_type"><span class="iconfont">
					{{ item.type }}
					</span></div>
					<div class="info_temp">
						<b>{{ item.low }}</b>
						~
						<b>{{ item.high }}</b>
					</div>
					<div class="info_date"><span>{{ item.date }}</span></div>
				</li>
			</ul>
		</div>
		
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="./js/main.js"></script>
		
	</body>
</html>
